<template>
	<div>
		<!-- 内容 -->
		<div class="MoveContent">
			<div class="MoveTheatres">
				<div class="MoveTheatresTitle">
					<h3>影院热映</h3>
					<router-link :to="{path:'/hot_move'}">更多 <span>&#x3e;</span></router-link>
					
			</div>
			<router-view></router-view>
			<div class="MoveTheatresCon">
				<div class="MoveShow">
					<ul>
						
						<router-link :to="{path:'/move_details'}">
						<li>
							<a href=""><img src="../../assets/images/1.jpg"/></a>
							<div class="MoveSmail">
								<h3>实名制</h3>
								<p class="MoveFirst">主演：BOB/bob/Bob</p>
								<p class="MoveThird">标签：<span>中国</span><span>中国</span><span>中国</span></p>
								<p class="MoveSecond">评论数：2301</p>
							</div>
						</li>
						</router-link>
						<router-view></router-view>
						
						
						<li>
							<a href=""><img src="../../assets/images/1.jpg"/></a>
							<div class="MoveSmail">
								<h3>实名制</h3>
								<p class="MoveFirst">主演：BOB/bob/Bob</p>
								<p class="MoveThird">标签：<span>中国</span><span>中国</span><span>中国</span></p>
								<p class="MoveSecond">评论数：2301</p>
							</div>
						</li>
						<li>
							<a href=""><img src="../../assets/images/1.jpg"/></a>
							<div class="MoveSmail">
								<h3>实名制</h3>
								<p class="MoveFirst">主演：BOB/bob/Bob</p>
								<p class="MoveThird">标签：<span>中国</span><span>中国</span><span>中国</span></p>
								<p class="MoveSecond">评论数：2301</p>
							</div>
						</li>
						<li>
							<a href=" "><img src="../../assets/images/1.jpg"/></a>
							<div class="MoveSmail">
								<h3>实名制</h3>
								<p class="MoveFirst">主演：BOB/bob/Bob</p>
								<p class="MoveThird">标签：<span>中国</span><span>中国</span><span>中国</span></p>
								<p class="MoveSecond">评论数：2301</p>
							</div>
						</li>
						<li>
							<a href=""><img src="../../assets/images/1.jpg"/></a>
							<div class="MoveSmail">
								<h3>实名制</h3>
								<p class="MoveFirst">主演：BOB/bob/Bob</p>
								<p class="MoveThird">标签：<span>中国</span><span>中国</span><span>中国</span></p>
								<p class="MoveSecond">评论数：2301</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		
		
		<div class="MoveAboutToShow">
			<div class="MoveTheatresTitle">
				<h3>即将上映</h3>
				<a href="javascript:;">更多 <span>&#x3e;</span>
					</a>
				</div>
				<div class="MoveShow">
					<ul>
						<li>
							<a href=""><img src="../../assets/images/1.jpg" /></a>
							<div class="MoveSmail">
								<h3>实名制</h3>
								<p class="MoveFirst">主演：BOB/bob/Bob</p>
								<p class="MoveThird">标签：<span>中国</span><span>中国</span><span>中国</span></p>
								<p class="MoveSecond">评论数：2301</p>
							</div>
						</li>
						<li>
							<a href=""><img src="../../assets/images/1.jpg" /></a>
							<div class="MoveSmail">
								<h3>实名制</h3>
								<p class="MoveFirst">主演：BOB/bob/Bob</p>
								<p class="MoveThird">标签：<span>中国</span><span>中国</span><span>中国</span></p>
								<p class="MoveSecond">评论数：2301</p>
							</div>
						</li>
						<li>
							<a href=""><img src="../../assets/images/1.jpg" /></a>
							<div class="MoveSmail">
								<h3>实名制</h3>
								<p class="MoveFirst">主演：BOB/bob/Bob</p>
								<p class="MoveThird">标签：<span>中国</span><span>中国</span><span>中国</span></p>
								<p class="MoveSecond">评论数：2301</p>
							</div>
						</li>
						<li>
							<a href=""><img src="../../assets/images/1.jpg" /></a>
							<div class="MoveSmail">
								<h3>实名制</h3>
								<p class="MoveFirst">主演：BOB/bob/Bob</p>
								<p class="MoveThird">标签：<span>中国</span><span>中国</span><span>中国</span></p>
								<p class="MoveSecond">评论数：2301</p>
							</div>
						</li>
						<li>
							<a href=""><img src="../../assets/images/1.jpg" /></a>
							<div class="MoveSmail">
								<h3>实名制</h3>
								<p class="MoveFirst">主演：BOB/bob/Bob</p>
								<p class="MoveThird">标签：<span>中国</span><span>中国</span><span>中国</span></p>
								<p class="MoveSecond">评论数：2301</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="MoveTvShow">
				<div class="MoveTheatresTitle">
					<h3>热播电视剧</h3>
					<a href="javascript:;">更多
						<span>&#x3e;</span></a>
			</div>
			<div class="MoveShow">
					<ul>
						<li>
							<a href=""><img src="../../assets/images/1.jpg"/></a>
							<div class="MoveSmail">
								<h3>实名制</h3>
								<p class="MoveFirst">主演：BOB/bob/Bob</p>
								<p class="MoveThird">标签：<span>中国</span><span>中国</span><span>中国</span></p>
								<p class="MoveSecond">评论数：2301</p>
							</div>
						</li>
						<li>
							<a href=""><img src="../../assets/images/1.jpg"/></a>
							<div class="MoveSmail">
								<h3>实名制</h3>
								<p class="MoveFirst">主演：BOB/bob/Bob</p>
								<p class="MoveThird">标签：<span>中国</span><span>中国</span><span>中国</span></p>
								<p class="MoveSecond">评论数：2301</p>
							</div>
						</li>
						<li>
							<a href=""><img src="../../assets/images/1.jpg"/></a>
							<div class="MoveSmail">
								<h3>实名制</h3>
								<p class="MoveFirst">主演：BOB/bob/Bob</p>
								<p class="MoveThird">标签：<span>中国</span><span>中国</span><span>中国</span></p>
								<p class="MoveSecond">评论数：2301</p>
							</div>
						</li>
						<li>
							<a href=""><img src="../../assets/images/1.jpg"/></a>
							<div class="MoveSmail">
								<h3>实名制</h3>
								<p class="MoveFirst">主演：BOB/bob/Bob</p>
								<p class="MoveThird">标签：<span>中国</span><span>中国</span><span>中国</span></p>
								<p class="MoveSecond">评论数：2301</p>
							</div>
						</li>
						<li>
							<a href=""><img src="../../assets/images/1.jpg"/></a>
							<div class="MoveSmail">
								<h3>实名制</h3>
								<p class="MoveFirst">主演：BOB/bob/Bob</p>
								<p class="MoveThird">标签：<span>中国</span><span>中国</span><span>中国</span></p>
								<p class="MoveSecond">评论数：2301</p>
							</div>
						</li>
					</ul>
				</div>
		</div>
	</div>
	</div>
</template>

<script>
	export default{
		name:'move',
		data() {
			return {
		
			}
		}
	}

var num = window.devicePixelRatio;
var bili = 1 / num;
var meta_vp = document.createElement('meta');
meta_vp.name = 'viewport';
meta_vp.content = 'width=device-width, user-scalable=no, initial-scale=' + bili + ', maximum-scale=' + bili + ', minimum-scale==' + bili + '';
document.head.appendChild(meta_vp);

// 设置html 的 font-size
var wid = document.documentElement.clientWidth / 10;
document.documentElement.style.fontSize = wid + 'px';
</script>

<style>
	body {
  background: #f0f0f0;
}

.MoveContent{
  position: absolute;
  left: 0;
  width: 100%;
}

.MoveContent {
  top: 2.54666667rem;
  bottom: 1.22666667rem;
  overflow: auto;
}
.MoveContent .MoveTheatres,
.MoveContent .MoveAboutToShow,
.MoveContent .MoveTvShow {
  margin-bottom: 0.32rem;
  background-color: #ffffff;
}
.MoveTheatres,
.MoveAboutToShow,
.MoveTvShow {
  padding-top: 0.66666667rem;
  overflow: hidden;
}
.MoveTheatresTitle {
  overflow: hidden;
}
.MoveTheatresTitle h3 {
  float: left;
  font-size: 0.41333333rem;
  margin-left: 0.26666667rem;
}
.MoveTheatresTitle a {
  float: right;
  font-size: 0.30666667rem;
  margin-right: 0.72rem;
}
.MoveTheatresCon,
.MoveShow {
  margin-top: 0.56rem;
}
.MoveShow ul {
  overflow: hidden;
  white-space: nowrap;
  width: 50000px;
}
.MoveShow li {
  width: 6.34666667rem;
  height: 3.10666667rem;
  float: left;
  margin-left: 0.26666667rem;
  display: inline-block;
  border: 1px solid #f0f0f0; 
  padding-top: 0.14666667rem;
}
.MoveShow img {
  height: 2.68rem;
  width: 2.01333333rem;
}
.MoveShow h3 {
  font-size: 0.4rem;
  margin-bottom: 0.42666667rem;
}
.MoveShow p {
  font-size: 0.24rem;
}
.MoveSecond {
  margin-top: 0.4rem;
  font-size: 0.29333333rem;
  font-weight: 700;
}
.MoveThird {
  margin-top: 0.4rem;
}
.MoveThird span {
  display: inline-block;
  margin: 0 0.06666667rem;
  background: #f0f0f0;
  border-radius: 40%;
}
.MoveShow .MoveSmail {
  display: inline-block;
  padding-left: 0.45333333rem;
}
.MoveFoot {
  background: #ffffff;
  position: fixed;
  bottom: 0;
  height: 1.22666667rem;
  padding-top: 0.13333333rem;
}
.MoveFoot ul {
  ist-style: none;
}
.MoveFoot ul li {
  float: left;
  font-size: 0.26666667rem;
  margin: 0 0.97333333rem;
}
.MoveFoot ul li img {
  height: 0.54666667rem;
  width: 0.54666667rem;
}

</style>